<template>
  <div>
    <div class="header">
      <div class="same">
        <div class="til">
          <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
          <span>选择地址</span>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="same">
        <van-address-edit
          :area-list="areaList"
          :address-info="addressInfo"
          show-delete
          show-set-default
          show-search-result
          :search-result="searchResult"
          :area-columns-placeholder="['请选择', '请选择', '请选择']"
          @save="onSave"
          @delete="onDelete"
          @change-detail="onChangeDetail"
          @change-area="onChangeArea"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
import { Toast } from "vant";
import { findAddress, addList, editList, delList } from "@/api/address.js";
export default {
  data() {
    return {
      areaList,
      searchResult: [],
      addressInfo: {
        id: 0,
        name: "",
        tel: "",
        province: "", //省份
        city: "", //城市
        county: "", //区县
        addressDetail: "",
        isDefault: false,
      },
      city: "",
    };
  },
  mounted() {
    this.findAddress();
  },
  methods: {
    findAddress() {
      let addressId = this.$route.params.id;
      if (addressId == 0) {
        this.addressInfo = {};
      } else {
        findAddress(addressId).then((res) => {
          // console.log(res);
          this.addressInfo = {
            id: res.data.data.addressId,
            name: res.data.data.name,
            tel: res.data.data.telephone,
            isDefault: res.data.data.isDefault,
            province: res.data.data.region,
            addressDetail: res.data.data.detailedAddress,
          };
        });
      }
    },
    onSave(data) {
      // console.log(data);

      let addressId = this.$route.params.id;
      let usersId = this.$store.state.user.id;
      let editAddress = {
        addressId: Number(addressId),
        detailedAddress: data.addressDetail,
        name: data.name,
        region: data.province + data.city,
        setdefault: String(data.isDefault),
        telephone: data.tel,
        usersId: usersId,
      };
      let addAddress = {
        detailedAddress: data.addressDetail,
        name: data.name,
        region: data.province + data.city,
        setdefault: String(data.isDefault),
        telephone: data.tel,
        usersId: usersId,
      };
      // console.log(usersId);
      if (usersId === undefined) {
        this.$message({
          type: "error",
          message: "请登录",
        });
        this.$router.push("/login");
      } else {
        if (addressId == 0) {
          addList(addAddress).then((res) => {
            // console.log(res);
            this.$message({
              type: "success",
              message: "添加地址成功",
            });
            this.$router.push("/Address");
          });
        } else {
          editList(editAddress).then((res) => {
            // console.log(res);
            this.$message({
              type: "success",
              message: "修改地址成功",
            });
            this.$router.push("/Address");
          });
        }
      }
    },
    onDelete() {
      Toast("delete");
      let addressId = this.$route.params.id;
      if (addressId == 0) {
        Toast("请添加,在删除");
      } else {
        delList(addressId).then((res) => {
          console.log(res);
          this.$router.push("/Address");
          Toast("删除成功");
        });
      }
    },
    onChangeArea(values) {
      this.city = values[1].name;
    },
    onChangeDetail(val) {
      const self = this;
      if (val) {
        AMap.plugin("AMap.Autocomplete", function () {
          // 实例化Autocomplete
          var autoOptions = {
            //city 限定城市，默认全国
            city: self.city,
          };
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(val, function (status, result) {
            // 搜索成功时，result即是对应的匹配数据
            // console.log(result.tips);
            let { name, address } = result.tips[0];

            self.searchResult = [
              {
                name: name,
                address: address,
              },
            ];
          });
        });
      } else {
        this.searchResult = [];
      }
    },
  },
};
</script>
<style scoped lang="scss">
.header {
  width: 100%;
  height: auto;
  color: #333;
  .til {
    width: 100%;
    height: 10vh;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    font-size: 18px;
    span {
      width: 56%;

      display: flex;
      justify-content: right;
    }
  }
}
.main {
  width: 100%;
  height: 100vh;
  background: #eee;
  overflow: hidden;
  .tips {
    width: 100%;
    height: 8vh;
    background: #fff;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    color: #333;
    dt {
      height: 3.5vh;
    }
    dd {
      color: rgb(129, 129, 129);
      width: 75%;

      font-size: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}
</style>
